import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import classNames from 'classnames'
import { billListData } from '@/contents/index'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addBillList } from '@/store/modules/billStore'
import './index.scss'
import dayjs from 'dayjs'


export default function New() {
  const navigate = useNavigate()

  const [dateVisible, setDateVisible] = useState(false)

  const dispatch = useDispatch()
  // 收集表单数据
  // 组件Input已经对onChange进行过封装
  const handleMoneyChange = (value) => {
    setMoney(value)
  }

  // 账单类型
  const [billType, setBillType] = useState('pay')
  const [money, setMoney] = useState()
  const [useFor, setUseFor] = useState('')
  const [date, setDate] = useState()
  const saveBill = () => {
    const data = {
      type: billType,
      money: billType === 'pay' ? -money : money,
      date: date,
      useFor: useFor
    }
    dispatch(addBillList(data))
    navigate('/')
  }


  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={ () => navigate(-1) }>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={ classNames(billType === 'pay' ? 'selected' : '') }
            onClick={ () => setBillType('pay') }
          >
            支出
          </Button>
          <Button
            className={ classNames(billType === 'income' ? 'selected' : '') }
            shape="rounded"
            onClick={ () => setBillType('income') }
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <Icon type="calendar" className="icon" />
              <span className="text" onClick={ () => setDateVisible(true) }>
                { dayjs(date).format('YYYY-MM-DD') }
              </span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={ new Date() }
                visible={ dateVisible }
                onClose={ () => setDateVisible(false) }
                onConfirm={ (value) => { setDate(value), setDateVisible(false) } }
                onCancel={ () => setDateVisible(false) }
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={ money }
                onChange={ handleMoneyChange }
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* 数据区域 */ }
        { billListData[billType].map(item => {
          return (
            <div className="kaType" key={ item.type }>
              <div className="title">{ item.name }</div>
              <div className="list">
                { item.list.map(item => {
                  return (
                    // 控制激活状态下的账单类型
                    <div
                      className={ classNames(
                        'item',
                        useFor === item.type ? 'selected' : ''
                      ) }
                      key={ item.type }
                      onClick={ () => setUseFor(item.type) }
                    >
                      <div className="icon">
                        <Icon type={ item.type } />
                      </div>
                      <div className="text">{ item.name }</div>
                    </div>
                  )
                }) }
              </div>
            </div>
          )
        }) }
      </div>

      <div className="btns">
        <Button className="btn save" onClick={ saveBill }>
          保 存
        </Button>
      </div>
    </div>
  )
}
